<template>
  <view class="login-page">
    <view class="top-bg"> </view>
    <view class="login-box">
      <view class="input-item">
        <input
          class="uni-input"
          v-model="tenantName"
          placeholder="请输入租户名称"
        />
      </view>
      <view class="input-item">
        <input class="uni-input" v-model="userName" placeholder="请输入账号" />
      </view>
      <view class="input-item">
        <input
          class="uni-input"
          placeholder="请输入密码"
          v-model="passWord"
          :password="showPassword"
        />
      </view>

      <view class="input-item">
        <button class="uni-button" @click="navigateToIndex">登录</button>
      </view>

      <!-- <text
            class="uni-icon"
            :class="[!showPassword ? 'uni-eye-active' : '']"
            @click="changePassword"
            >&#xe568;</text
          > -->
    </view>
    <Verify
      @success="pwdLogin"
      :mode="'pop'"
      :captchaType="'blockPuzzle'"
      :imgSize="{ width: '330px', height: '155px' }"
      ref="verify"
    ></Verify>
  </view>
</template>

<script>
import { login, getTenantIdByName } from "@/service/index";
import Verify from "@/components/verifition/Verify";
import { STORAGE_KEY, RESPONSE_CODE } from "@/common/constant";
export default {
  components: {
    Verify,
  },
  data() {
    return {
      captchaEnabled: true, // 验证码开关 TODO 芋艿：需要抽到配置里
      userName: "admin",
      passWord: "admin123",
      tenantName: "红棠科技",
      showPassword: true,
    };
  },
  onLoad() {},
  methods: {
    async getTenantId() {
      let tenantName = "红棠科技";
      const res = await getTenantIdByName(tenantName);
      if (res.code == RESPONSE_CODE.SUCCESS) {
        // 本地存储租户id
        // uni.clearStorageSync(); 清楚全部
        uni.setStorageSync(STORAGE_KEY.tenantId, res.data);
        console.log("租户成功信息", res);
      } else {
        uni.removeStorageSync(STORAGE_KEY.tenantId);
        console.log("租户失败信息", res);
      }
    },

    async navigateToIndex() {
      // 显示验证码
      if (this.captchaEnabled) {
        this.$refs.verify.show();
      } else {
        // 直接登录
        await this.pwdLogin();
      }
    },

    // 密码登录
    async pwdLogin(captchaParams) {
      // 执行登录
      this.getTenantId();
      const res = await login({
        captchaVerification: captchaParams.captchaVerification,
        password: this.passWord,
        rememberMe: true,
        tenantName: this.tenantName,
        username: this.userName,
      });

      if (res.code == RESPONSE_CODE.SUCCESS) {
        uni.showToast({
          title: "登录成功",
          icon: "none",
        });
        console.log("登录接口正确信息", res);
        uni.setStorageSync(STORAGE_KEY.token, res.data.accessToken);
        // 跳转tabs页面pages/index/index入口页面
        uni.navigateTo({
          url: "/pages/homePage/index",
        });
      } else {
        console.log("登录接口失败信息", res);
        uni.removeStorageSync(STORAGE_KEY.token);
        this.$refs.verify.close();
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    changePassword() {
      this.showPassword = !this.showPassword;
    },
  },
};
</script>

<style lang="less">
.login-page {
  background: #fff;
  position: relative;
  width: 100%;
  height: 100vh;
}
.top-bg {
  position: absolute;
  left: 50%;
  top: -1300rpx;
  transform: translateX(-50%);
  width: 2000rpx;
  height: 2000rpx;
  border-radius: 50%;
  /* 渐变背景色 */
  background: linear-gradient(to right, #004bd6, #00c7ff);
}
.login-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 50%;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
  padding: 20rpx 50rpx;
  box-sizing: border-box;
  .input-item {
    .uni-input {
      margin-top: 40rpx;
      width: 100%;
      height: 70rpx;
      border-bottom: 0.1px solid #eee;
      font-size: 14px;
    }
    .uni-button {
      margin-top: 40rpx;
      background: linear-gradient(to right, #004bd6, #00c7ff);
      color: #fff;
    }
  }
}
</style>
